<template>
	<view class="fycaritem">
		<view class="car-list-item" @click="toDetail">
			<view class="car-list-item_avatar">
				<!--  -->
				<view v-if="carInfo.istop=='1'" class="tag-top">
					<text>置顶</text>
				</view>
				<view class="tag-bootm">
					<text class="text-xs">{{carInfo.imglist.length}}张</text>
				</view>
				<image :src="carInfo.imglist[0]"></image>
			</view>
			<view class="car-list-item_content">
				<uv-text :lines="1" :text="`${carInfo.brand} ${carInfo.cartype}`"></uv-text>
				<view><uv-text type="info" :size="12" :text="carInfo.desc"></uv-text></view>
				<view class="car-list-item_content_price">
					<view class="price-item"><uv-text type="error" :text="`${carInfo.money}万`" :size="18"></uv-text>
					</view>
					<view class="price-item"><uv-text type="info" :size="12"
							:text="`新车价：${carInfo.guideprice}万`"></uv-text>
					</view>
				</view>
				<view class="car-list-item_content_tags">
					<fy-user-tag v-if="carInfo.isbusi=='1'" text="认" bgcolor="#3d9eff" color="#fff"></fy-user-tag> 
					<fy-user-tag v-if="carInfo.vipnames" :text="carInfo.vipnames" bgcolor="#07C160" color="#fff"></fy-user-tag> 
					<!-- <uv-avatar v-if="carInfo.isbusi=='1'" text="认" shape="square" size="18" font-size='12'
						bg-color="#3d9eff"></uv-avatar>
					<uv-avatar text="新" shape="square" size="18" font-size='12' bg-color="#eeffeb"
						color="#30ff52"></uv-avatar>
					<uv-avatar :text="carInfo.vipnames" shape="square" size="18" font-size='12'></uv-avatar> -->
				</view>



			</view>
		</view>

		<slot name="edit"></slot>
	</view>

</template>

<script>
	export default {
		name: "fy-car-item",
		props: {
			carInfo: {
				type: Object
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toDetail() {
				var parm = `carid=${this.carInfo.id}&userid=${this.carInfo.userid}`
				uni.navigateTo({
					url: '/pages/car/detail?' + parm
				})
			}
		}
	}
</script>

<style lang="scss">
	.car-list-item {
		display: flex;
		align-items: flex-start;
		background-color: #fff;
		padding: 20upx;
		margin: 20upx;
		border-radius: 10upx;

		&_avatar {
			border-radius: 8upx;
			position: relative;
			width: 220upx;
			height: 180upx;

			.tag-top {
				position: absolute;
				top: 0upx;
				left: 0upx;
				color: #fff;
				background-color: #ff3600;
				font-size: 24upx;
				padding: 4upx 20upx;
				border-radius: 8upx 0 8upx 0;
				text-align: center;
				z-index: 1;
			}

			.tag-bootm {
				position: absolute;
				bottom: 0px;
				right: 0px;
				font-size: 24upx;
				padding: 2upx 16upx;
				border-radius: 16upx 0 8upx 0;
				background: rgba(0,0,0,0.45);
				color: #fff;
				text-align: center;
				z-index: 1;
			}

			image {
				width: 220upx;
				height: 180upx;
				border-radius: 8upx;
			}
		}

		&_content {
			margin-left: 10px;
			flex: 1;

			&_price {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;

				.price-item {
					margin-right: 20px;
				}
			}

			&_tags {
				margin-top: 2px;
				 
			}
		}

		&_footer {}
	}
</style>